<template>
  <div>
        <!--环形图-->
        <div><ve-ring :data="chartData1"></ve-ring></div>

        <!--柱状图-->
        <div><ve-histogram :data="chartData2"></ve-histogram></div>

        <!--饼图-->
        <div><ve-pie :data="chartData3"></ve-pie></div>

        <!--折线图-->
        <div><ve-line :data="chartData4" :settings="chartSettings"></ve-line></div>
  </div>
</template>
<script>
export default {
  data() {
    this.chartSettings = {
                metrics: ['访问用户', '下单用户'],
                dimension: ['日期'],
                area:false
            };
            return {
                chartData1: {
                    columns: ['型号', '数量'],
                    rows: [
                        { '型号': '电视', '数量': 30 },
                        { '型号': '微波炉', '数量': 40 },
                        { '型号': '手机', '数量': 50 },
                    ]
                },

                chartData2: {
                    columns: ['日期', '访问用户', '下单用户', '下单率'],
                    rows: [
                        { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
                        { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
                        { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
                        { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
                        { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
                        { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
                    ]
                },
                chartData3: {
                    columns: ['日期', '访问用户'],
                    rows: [
                        { '日期': '1/1', '访问用户': 1393 },
                        { '日期': '1/2', '访问用户': 3530 },
                        { '日期': '1/3', '访问用户': 2923 },
                        { '日期': '1/4', '访问用户': 1723 },
                        { '日期': '1/5', '访问用户': 3792 },
                        { '日期': '1/6', '访问用户': 4593 }
                    ]
                },
                chartData4: {
                    columns: ['日期', '访问用户', '下单用户', '下单率', '啦啦'],
                    rows: [
                        { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
                        { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
                        { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
                        { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
                        { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
                        { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
                    ]
                }

            }
  }
};
</script>
<style lang="less" scoped>
</style>